import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';

// Simple text-based icons
const Icon = ({ name, size = 24, color = '#000' }: { name: string; size?: number; color?: string }) => {
  const iconMap: { [key: string]: string } = {
    'arrow-back': '⬅️',
    'list': '☰',
    'description': '📄',
    'person-add': '➕',
    'person-outline': '👤',
    'nightlight': '⭐',
    'attach-money': '💰',
    'bookmark': '🔖',
    'flight': '✈️',
    'assignment': '✓',
    'computer': '💻',
    'send': '📤',
    'shopping-cart': '🛒',
    'directions-car': '🚗',
    'trending-up': '📈',
  };

  return (
    <Text style={{ fontSize: size, color, textAlign: 'center' }}>
      {iconMap[name] || '📱'}
    </Text>
  );
};

interface ApplicationItem {
  id: string;
  title: string;
  icon: string;
  onPress: () => void;
}

interface ApplicationCategory {
  id: string;
  title: string;
  items: ApplicationItem[];
}

const AllApplications: React.FC = () => {
  const navigation = useNavigation();

  const applicationData: ApplicationCategory[] = [
    {
      id: '1',
      title: '人事管理',
      items: [
        {
          id: '1-1',
          title: '招聘表',
          icon: 'description',
          onPress: () => console.log('招聘表'),
        },
        {
          id: '1-2',
          title: '转正申请',
          icon: 'person-add',
          onPress: () => navigation.navigate('Zhuanzheng' as never),
        },
        {
          id: '1-3',
          title: '请假申请',
          icon: 'person-outline',
          onPress: () => navigation.navigate('Qingjia' as never),
        },
        {
          id: '1-4',
          title: '加班申请',
          icon: 'nightlight',
          onPress: () => navigation.navigate('Jiaban' as never),
        },
        {
          id: '1-5',
          title: '薪资调整',
          icon: 'attach-money',
          onPress: () => navigation.navigate('Xinzi' as never),
        },
        {
          id: '1-6',
          title: '录用表',
          icon: 'bookmark',
          onPress: () => navigation.navigate('Luyong' as never),
        },
      ],
    },
    {
      id: '2',
      title: '财务类',
      items: [
        {
          id: '2-1',
          title: '差旅报销',
          icon: 'flight',
          onPress: () => console.log('差旅报销'),
        },
        {
          id: '2-2',
          title: '活动经费',
          icon: 'assignment',
          onPress: () => console.log('活动经费'),
        },
        {
          id: '2-3',
          title: '培训经费',
          icon: 'computer',
          onPress: () => console.log('培训经费'),
        },
      ],
    },
    {
      id: '3',
      title: '行政事务类',
      items: [
        {
          id: '3-1',
          title: '办公用品',
          icon: 'send',
          onPress: () => console.log('办公用品'),
        },
        {
          id: '3-2',
          title: '采购申请',
          icon: 'shopping-cart',
          onPress: () => console.log('采购申请'),
        },
        {
          id: '3-3',
          title: '用车申请',
          icon: 'directions-car',
          onPress: () => console.log('用车申请'),
        },
      ],
    },
    {
      id: '4',
      title: '业务相关类',
      items: [
        {
          id: '4-1',
          title: '推广费用',
          icon: 'trending-up',
          onPress: () => console.log('推广费用'),
        },
      ],
    },
  ];

  const renderApplicationItem = (item: ApplicationItem) => (
    <TouchableOpacity
      key={item.id}
      style={styles.applicationItem}
      onPress={item.onPress}
    >
      <View style={styles.iconContainer}>
        <Icon name={item.icon} size={28} color="#2196F3" />
      </View>
      <Text style={styles.itemTitle}>{item.title}</Text>
    </TouchableOpacity>
  );

  const renderCategory = (category: ApplicationCategory) => (
    <View key={category.id} style={styles.categoryCard}>
      <View style={styles.categoryHeader}>
        <Icon name="list" size={18} color="#666" />
        <Text style={styles.categoryTitle}>{category.title}</Text>
      </View>
      <View style={styles.itemsContainer}>
        {category.items.map(renderApplicationItem)}
      </View>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Icon name="arrow-back" size={20} color="#333" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>流程申请</Text>
        <TouchableOpacity 
          style={styles.myApplicationsButton}
          onPress={() => navigation.navigate('My' as never)}
        >
          <Text style={styles.myApplicationsText}>我的申请</Text>
        </TouchableOpacity>
      </View>

      {/* Content */}
      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        {applicationData.map(renderCategory)}
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  backButton: {
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  myApplicationsButton: {
    padding: 4,
  },
  myApplicationsText: {
    fontSize: 14,
    color: '#2196F3',
  },
  content: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: 16,
  },
  categoryCard: {
    backgroundColor: '#fff',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    padding: 16,
    marginBottom: 16,
  },
  categoryHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  categoryTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    marginLeft: 8,
  },
  itemsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  applicationItem: {
    width: '30%',
    alignItems: 'center',
    marginBottom: 16,
  },
  iconContainer: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#f8f9fa',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 8,
    borderWidth: 1,
    borderColor: '#e9ecef',
  },
  itemTitle: {
    fontSize: 12,
    color: '#333',
    textAlign: 'center',
    lineHeight: 16,
    fontWeight: '400',
  },
});

export default AllApplications;

